import { useState } from "react";

interface Player {
  firstName: string;
  lastName: string;
  score: number;
}

function Scoreboard() {
  const [player, setPlayer] = useState<Player>({
    firstName: "Ranjani",
    lastName: "X",
    score: 10
  });

  function handlePlusClick() {
    setPlayer({
      ...player,
      score: player.score + 1
    });
  }

  function handleFirstNameChange(event: React.ChangeEvent<HTMLInputElement>) {
    setPlayer({
      ...player,
      firstName: event.target.value
    });
  }

  function handleLastNameChange(event: React.ChangeEvent<HTMLInputElement>) {
    setPlayer({
      ...player,
      lastName: event.target.value
    });
  }

  return (
    <>
      <label>
        Score: <b>{player.score}</b>
        &nbsp;
        <button onClick={handlePlusClick}>+1</button>
      </label>
      <br />
      <label>
        First name: &nbsp;
        <input value={player.firstName} onChange={handleFirstNameChange} />
      </label>
      <br />
      <label>
        Last name: &nbsp;
        <input value={player.lastName} onChange={handleLastNameChange} />
      </label>
    </>
  );
}

export default Scoreboard;
